<template>
   <div>
	<Button type="info" size="small" @click="add" v-if="checkPermission('110311')">添加管理员</Button>
	<br><br>
    <!-- 显示管理员信息的表格 -->
    <Table border :columns="user_table.columns" :data="list"></Table>
    <!-- 弹出框 -->
	<Modal ref="modal" title="编辑" :mask-closable="false" :scrollable="false">
		<Form ref="formValidate" :model="user_table.current" :rules="user_table.ruleValidate" :label-width="80">
			<FormItem label="用户名:" prop="username">
				<Input v-model="admin.username" placeholder="输入管理员用户名!" ></Input>
			</FormItem>
            <FormItem label="密码:" prop="password">
				<Input v-model="admin.password" placeholder="设置用户密码! **密码由数字和字母组成，且长度不能少于6位多于10位！" ></Input>
			</FormItem>
            <FormItem label="角色:" prop="role_id">
                <Select v-model="admin.role_id" clearable style="width:200px">
                    <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
			</FormItem>
            <!-- test div -->
            <!-- <div>{{admin.role_id}}{{admin.username}}</div> -->
		</Form>
		<div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="ok('formValidate')">确定</Button>
        </div>
	</Modal>
    <AutoPage v-model="page"></AutoPage>
</div>
</template>
<script>
import Page from "@/common/model/Page";
import Admin from "./model/Admin";
import AdminRole from "./model/AdminRole";
import AutoPage from "@/common/components/AutoPage";
import parent from "../Parent";
export default {
    extends:parent,
    components: {
        AutoPage
    },
    data() {
        //变量声明
        return {
            page: new Page("search/admin"), //分页查询接口
            user_table:{
                columns:[
                    {title:'ID',key:'id'},
                    { title: '管理员名称', render: (h, params) => {
                        return h('div', [
                            h('Icon', {
                                props: { type: 'person', color:'#2b85e4',size:'50px'}
                            }),
                            h('strong', '  '+ params.row.username)
                        ]);
                    }},
                    { title: '管理员角色', render: (h, params) => {
                        return h('div', [
                            h('Icon', {
                                props: { type: 'gear-b' }
                            }),
                            h('strong', '  '+params.row.role.name)
                        ]);
                    }},
                    {title:'操作', width:150, align:'center', render:(h,params)=>{
                        return h('div', [
                            h('Button', {
                                props: { type: 'primary', size: 'small' },
                                style: { marginRight: '5px',display:this.showButton("110313")},
                                on: { click: () => { this.modify(params.index) } }
                            }, '修改'),
                            h('Button', {
                                props: { type: 'error', size: 'small', disabled: params.row.id == this.userInfo.id },
                                style:{display:this.showButton("110312")},
                                on: { click: () => { this.remove(params.index) } }
                            }, '删除')
                        ]);
                    }}
                ],
                current:{},
                ruleValidate: {
                    username: [
                        { required: true, message: '*请输入管理员用户名！', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '*请输入管理员账号密码！', trigger: 'blur' }
                    ],
                    role_id:[
                        // {required: true, message: '*请选择管理员角色！', trigger: 'change'}
                    ]
                }
            },
            roleList: []  
        };
    },
    computed: {
        admin() {
            return this.user_table.current;
        },
        list() {
            return Admin.parseList(this.page.list);
        }
    },
    methods: {
        add(){
            var admin = new Admin();
            this.user_table.current = admin;
            this.user_table.current.mode= "add";
            if(this.roleList.length) this.user_table.current.role_id = this.roleList[0].id;
            this.show();
        },
        modify(index){
            this.user_table.current=this.list[index];
            this.user_table.current.mode='modify';
            this.admin.password = "******";
            this.show();
        },
        remove(index){
            if(confirm("确定要删除该管理员吗？")) {
                this.api.post("admin/delete", { id: this.page.list[index].id }, res => {
                    this.page.getData();
                    this.$CustomMessage.success('删除成功!');
                    this.role_table.data.splice(index, 1);
					});
				}
        },
        show(){
            this.user_table.current.storageValue();
            //显示之前的密码以及角色--解决
            this.$refs["modal"].visible = true;
        },
        cancel(){
            this.$refs["modal"].visible = false;
            this.$CustomMessage.info('已取消!');
        },
        checkNameAndPwd(){
            var name=this.admin.username.replace(/\s+/, '').replace(/\s+$/,'');//+表示{1,}
            var password=this.admin.password.replace(/\s+/, '').replace(/\s+$/,'');//$ 以什么结束
            if(name.length!=0 && password.length!= 0){
                if(password.match(/^[0-9a-zA-Z]{6,10}$/)){
                    return true;
                }else{
                    alert('**密码有数字和字母组成，且长度不能少于6位多于10位！');
                    return false;
                }    
            }else{
                alert('用户名或密码不能是一系列的空格！');
                return false;
            }
        },
        ok(name){
            this.$refs[name].validate((valid)=>{
                if(valid){
                    if(this.checkNameAndPwd()==true){
                        if(this.user_table.current.mode =='add'){
                            this.api.post('admin/add', this.admin.serialize(), res=> {
                            this.page.getData();
                            this.$refs["modal"].visible=false;
                            this.$CustomMessage.success('*添加成功！');
                            });
                        }else{
                            this.api.post('admin/modify', this.user_table.current.serialize(), res=>{
                            this.page.getData();
                            this.$refs["modal"].visible=false;
                            this.$CustomMessage.success('*修改成功！');
                            });
                        } 
                    }   
                }else{
                        this.$CustomMessage.error('*请按要求填写信息！');
                }
            })
        }
    },
    created(){
        this.api.post("search/admin_role", null, res => {
            this.roleList = AdminRole.parseList(res.page.list);
        });
    }
}
</script>